<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/><!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/><!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telephone=no, email=no"/><!--忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <title>督办处理 - 手机号绑定</title>
    <link rel="stylesheet" href="static/css/icon/iconfont.css">
    <link rel="stylesheet" href="static/css/index.css">
    <script src="js/layer_mobile/layer.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div class="tip-warning">
    <div class="warning-content">
        <i class="iconfont iconicon-notice warning-icon" style="font-size:22px;"></i>
        您尚未绑定微信号码，请绑定账号
    </div>
</div>
<div class="page-bind-form">
    <form action="#" class="page-form">
        <div class="bind-form-control">
            <label for="mobileNo" class="control-label">手机号码:</label>
            <div class="form-control">
                <input id="mobileNo" type="text" placeholder="手机号码" maxlength="11" class="control-input"/>
            </div>
        </div>
        <div class="bind-form-control">
            <label for="smsCode" class=control-label>短信验证码:</label>
            <div class="form-control">
                <div class="form-control2">
                    <input id="smsCode" type="text" placeholder="短信验证码" maxlength="6" class="control-input"/>
                </div>
                <div class="form-control2">
                    <div class="ui-botton-green" id="sendButton">发送验证码</div>
                </div>
            </div>

        </div>
    </form>
</div>
<div class="page-bind-button">
    <div class="ui-botton-blue" id="button1">绑定</div>
</div>
<script>
/**
 * description:获取URL的参数的value
 *@name：参数名称
 */
function getUrlParam(name, url) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'), href;
    if (url) {
        href = url;
        var index = url.indexOf('?');
        if (index != -1) {
            href = url.substring(index + 1);
        }
    } else {
        href = window.location.search.substr(1);
    }
    var r = href.match(reg); // 匹配目标参数
    if (r != null) return unescape(r[2]);
    return null; // 返回参数值
}
var CodeBind = {
    sendCodeButton: $('#sendButton'),
    bindButton: $('#button1'),
    smsInput: $('#smsCode'),
    mobileInput: $('#mobileNo'),
    data: {
        buttonEnabled: true,
        time: 60
    },
    // 获取短信验证码
    getSMScode: function() {
        var time = this.data.time;
        var zs = this
        var val = this.mobileInput.val()

        if (this.data.buttonEnabled) {
            if (val == '' || !this.validMobile()) {
                if (val == '') {
                    layer.open({
                        content: '请输入手机号码'
                        , btn: '确定'
                    });
                    // layer.open({
                    //     content: '请输入手机号码',
                    //     skin: 'msg',
                    //     time: 2 //2秒后自动关闭
                    // });

                } else {
                    layer.open({
                        content: '手机号码不正确'
                        , btn: '确定'
                    });
                    // layer.open({
                    //     content: '手机号码不正确',
                    //     skin: 'msg',
                    //     time: 2 //2秒后自动关闭
                    // })
                }

                return false
            }
            this.data.buttonEnabled = false;
            this.sendCode()
            var interval = setInterval(function() {
                time--
                if (time < 0) {
                    clearInterval(interval);
                    zs.sendCodeButton.text('发送验证码');
                    zs.data.buttonEnabled = true
                }
                zs.sendCodeButton.text('剩余' + time + '秒');
            }, 1000)
        }

    },
    validMobile: function() {
        var val = this.mobileInput.val()
        var reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/

        return reg.test(val)
    },
    sendCode: function() {
        var mobile = this.mobileInput.val()
        $.post('', { mobile: mobile }, function() {
            layer.open({
                content: '发送成功'
                , skin: 'msg'
                , time: 2 //2秒后自动关闭
            });

        })
    },
    // 提交
    submit: function() {
        var mobile = this.mobileInput.val()
        var valiCode = this.smsInput.val()
        if (mobile == '' || valiCode == '') {
            if (mobile == '') {
                layer.open({
                    content: '请输入手机号码'
                    , btn: '确定'
                });
            }else if(!this.validMobile()){
                layer.open({
                    content: '手机号码不正确'
                    , btn: '确定'
                });
            } else {
                layer.open({
                    content: '请输入验证码'
                    , btn: '确定'
                });
            }
            return false
        }
        layer.open({ type: 2 })
        $.post('', { mobile: mobile, valiCode: valiCode }, function() {
            layer.closeAll()
            layer.open({
                content: '绑定成功',
                btn: '确定'
            });
        })
    },
    init: function() {
        var zs = this
        // 发送
        this.sendCodeButton.click(function() {
            zs.getSMScode()
        })
        // 绑定
        this.bindButton.click(function() {
            zs.submit()
        })
    }
}
$(function() {
    CodeBind.init()
})
</script>
</body>
</html>
